<template>
  <div class="app-container">
    <el-form :model="postForm" :rules="rules" ref="postForm" label-position="right" label-width="220px" v-loading="this.listLoading">
      <div class="font-family-h font-bold margin-t50 margin-b40"><i class="square"></i>基础设置</div>
      <el-form-item label="平台名称：" prop="mpName">
        <el-input :maxlength=20 v-model="postForm.mpName" placeholder="请输入平台名称" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="老师姓名：" prop="lecturerName">
        <el-input :maxlength=10 v-model="postForm.lecturerName" placeholder="请输入老师姓名" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="lecturerPhone">
        <el-input type="tel" v-model="postForm.lecturerPhone" placeholder="请输入手机号码" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="服务人员：" prop="servicePersonal">
        <el-input :maxlength=10 v-model="postForm.servicePersonal" placeholder="请输入服务人员" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="登录账号：" prop="username">
        <el-input :maxlength=20 v-model="postForm.username" placeholder="请输入登录账号" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="登录密码：" prop="password">
        <el-input v-model="postForm.newPassword" placeholder="请修改登录密码" style="width:400px"></el-input>
        <span style="color:red">注意：编辑时非必填项，不填则默认不修改密码。</span>
      </el-form-item>
      <!--<el-form-item label="选择模板：" prop="template">
        <el-radio-group v-model="postForm.themeId">
          <el-radio v-for="(item, index) in themelist" :label="item.themeId" :key="index">{{item.name}}</el-radio>

        </el-radio-group>
      </el-form-item>-->
      <el-form-item label="选择模板：" prop="template">
        <el-radio-group style="background-color:#f5f7fa;padding:10px;" v-model="postForm.themeId">
          <div class="clearfix">
            <div class="fl margin-r40" v-for="(theme,index) in themelist" :key="index">
              <el-radio class="radio" style="display: block;" v-for="(item, index) in theme" :label="item.themeId" :key="index">{{item.name}}</el-radio>
            </div>
          </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="代理功能:" prop="agent">
        <el-radio-group v-model="postForm.agentLevels">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">一级代理</el-radio>
          <el-radio :label="3">三级代理</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="微信推送:" prop="wxts">
        <el-radio-group v-model="postForm.enableCourseWxPush">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="font-family-h font-bold margin-b40"><i class="square"></i>功能模块</div>
      <el-form-item label="活动:" prop="isActive">
        <el-radio-group v-model="postForm.enableActivityModule">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商城:" prop="isShop">
        <el-radio-group v-model="postForm.enableMallModule">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="专栏:" prop="isColumn">
        <el-radio-group v-model="postForm.enableColumnModule">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="资料:" prop="isDatum">
        <el-radio-group v-model="postForm.enableDatumModule">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="社群:" prop="isCommunity">
        <el-radio-group v-model="postForm.enableSocialGroup">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="测评:" prop="isEvaluation">
        <el-radio-group v-model="postForm.enableExamModule">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="资源:" prop="isResources">
        <el-radio-group v-model="postForm.enableResourceModule">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--表companyPoints-->
      <el-form-item label="积分:" prop="isIntegral">
        <el-radio-group v-model="postForm.enablePoints">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="小程序:" prop="isXcx">
        <el-radio-group v-model="postForm.enableWxapp">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="font-family-h font-bold margin-b40"><i class="square"></i>其他</div>
      <el-form-item label="乐视uuid：">
        <el-input v-model="postForm.letvUserUnique" placeholder="请输入乐视uuid" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="乐视私钥：">
        <el-input v-model="postForm.letvSecretKey" placeholder="请输入乐视私钥" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="腾讯视频:" prop="isTxVidio">
        <el-radio-group v-model="postForm.videoPlatformType">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="XX信息展示:" prop="isCjInfo">
        <el-radio-group v-model="postForm.enableShowInfo">
           <el-radio :label="0">关闭</el-radio>
           <el-radio :label="1">开通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="postForm.enableShowInfo== 1 " label="说明文字：" prop="desc">
        <el-input v-model="postForm.instruction" placeholder="请输入说明文字" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item v-show="postForm.enableShowInfo== 1" label="网址：" prop="website">
        <el-input v-model="postForm.netAddress" placeholder="请输入网址" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="请输入操作密码：" prop="savePassword">
        <el-input v-model="postForm.savePassword" placeholder="请输入保存密码" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-check" @click="submitForm">保存</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { toGetCompanyInfo, toGetThemeList, toSaveCompany } from '@/api/wechatPublic'
import { isPhoneNumber } from '@/utils/validate'
const checkPhone = (rule, value, callback) => {
  if (!isPhoneNumber(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: {
        companyId: 0,
        mpName: null,
        lecturerName: null,
        lecturerPhone: '',
        servicePersonal: '',
        username: null,
        newPassword: '6ozk24678',
        themeId: 14,
        agentLevels: 0,
        enableCourseWxPush: 1,
        enableResourceModule: 0,
        enableActivityModule: 1,
        enableMallModule: 0,
        enableColumnModule: 1,
        enableDatumModule: 0,
        enableSocialGroup: 0,
        enableExamModule: 0,
        enablePoints: 0,
        enableWxapp: 0,
        letvSecretKey: null,
        letvUserUnique: null,
        videoPlatformType: 1,
        enableShowInfo: 0,
        instruction: '六欧智库技术支持',
        netAddress: 'http://www.六欧智库.com',
        savePassword: null
      },
      themelist: [],
      mb1Arry: [],
      mb2Arry: [],
      mb3Arry: [],
      mb4Arry: [],
      mb5Arry: [],
      mb6Arry: [],
      listLoading: false,
      rules: {
        mpName: [
          { required: true, message: '请输入平台名称', trigger: 'blur' }
        ],
        lecturerName: [
          { required: true, message: '请输入老师姓名', trigger: 'blur' }
        ],
        lecturerPhone: [
          { required: true, trigger: 'blur', validator: checkPhone }
        ],
        username: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        savePassword: [
          { required: true, message: '操作密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
   watch: {
    'postForm.username' (val){
      //只能输入字母数字
       let name = val.replace(/[\W]/g,'');
       if(name != this.postForm.username){
         setTimeout(() => {
            this.postForm.username = name;
         }, 0);
       }
    }
  },
  created() {
    this.getThemeList()
    if (this.isEdit) {
      this.getCompanyInfo()
    }
  },
  mounted() {

  },
  methods: {

    getThemeList() {
      toGetThemeList()
        .then(res => {
          // 正确回调
          console.log('模板信息', res.data.data)
          this.themelist = res.data.data
          for (let i = 0; i < this.themelist.length; i++) {
            if (this.themelist[i].themeName == 'mb1') {
              this.mb1Arry.push(this.themelist[i])
            } else if (this.themelist[i].themeName == 'mb2') {
              this.mb2Arry.push(this.themelist[i])
            } else if (this.themelist[i].themeName == 'mb3') {
              this.mb3Arry.push(this.themelist[i])
            } else if (this.themelist[i].themeName == 'mb4') {
              this.mb4Arry.push(this.themelist[i])
            } else if (this.themelist[i].themeName == 'mb5') {
              this.mb5Arry.push(this.themelist[i])
            } else {
              this.mb6Arry.push(this.themelist[i])
            }
          }
          this.themelist = [this.mb1Arry, this.mb2Arry, this.mb3Arry, this.mb4Arry, this.mb5Arry, this.mb6Arry]
        })
        .catch(err => {
          console.log(err)
        })
    },
    getCompanyInfo() {
      this.listLoading = true
      toGetCompanyInfo(this.$route.params.companyId)
        .then(res => {
          // 正确回调
          this.postForm = res.data.data
          this.postForm.newPassword = null
          this.listLoading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    submitForm() {
      console.log(this.postForm)
      if (this.postForm.savePassword == null) {
        this.$message({
          type: 'info',
          message: '保存密码不能为空'
        })
      }
      this.$refs.postForm.validate(valid => {
        if (valid) {
          var data = { companyInfo: this.postForm }
          toSaveCompany(data)
            .then(res => {
              if (res.data.data.status == 0) {
                this.$notify({
                  title: '提示',
                  message: '操作密码错误!',
                  type: 'info'
                })
                return
              } else if (res.data.data.status == 2) {
                this.$notify({
                  title: '提示',
                  message: '用户账户已被占用!',
                  type: 'info'
                })
                return
              } else {
                this.$notify({
                  title: '提示',
                  message: '保存成功!',
                  type: 'success'
                })
                this.close()
              }
              this.close()
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    },
    close() {
      this.$store.dispatch('delVisitedViews', this.$route).then((views) => {
        const latestView = views.slice(-1)[0]
        if (latestView) {
          this.$router.push(latestView.path)
        } else {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>
<style scoped>
.radio+.radio {
  margin-left: 0;
}
  .radio {
    margin-bottom: 15px;
  }
</style>
